<template>
  <div class="block text-center" m="t-4">
    <el-table style="width: 100%" :data="lunboimgsArr">
      <el-table-column label="轮播图片" align="center" width="240">
        <template #default="scope">
          <img :src="scope.row.img" alt="" class="img" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="lunboDelFn">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-carousel trigger="click">
      <el-carousel-item v-for="item in lunboimgsArr" :key="item.bannerid">
        <img :src="item.img" alt="" class="imgs" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { lunbo, lunboDelRequest } from '@/api/lunbo'
import { ref } from 'vue'
let lunboimgsArr = ref([])
let token = localStorage.getItem('token')
//获取轮播列表
async function lunboList() {
  let r = await lunbo()
  console.log(r.data)
  if (r.data.code == 200) {
    lunboimgsArr.value = r.data.data
  }
}
lunboList()
//删除轮播图
function lunboDelFn() {
  lunboDelRequest().then((r) => {
    console.log(r)
    lunboList()
  })
}
//编辑轮播图
function handleEdit(row) {
  console.log(row)
}
</script>

<style scoped>
.img {
  width: 200px;
}
</style>
